import { urls } from '@/shared/constants';
import { urlComponents } from '@/shared/constants/stores';
import { Button, ButtonVariants } from '@/shared/ui';
import cn from 'classnames';

import { ReactComponent as PhonesMobilePromo } from '../../images/promo1-mobile.svg';
import { ReactComponent as PhonesPromo } from '../../images/promo1.svg';
import { PromoCard } from './PromoCard';
import cs from './PromoCard.module.scss';

export const Promo1 = () => (
  <PromoCard
    image={
      <>
        <PhonesPromo className={cs.desktop_promo1} />
        <PhonesMobilePromo className={cs.mobile_promo1} />
      </>
    }
  >
    <p className={cs.text}>
      Скачивайте бесплатное приложение «companyName — первый прикорм» и&nbsp;используйте адаптированную схему!
    </p>
    <div className={cs.icons}>
      {Object.entries(urlComponents).map(([url, component]) => (
        <Button
          aria-label={url}
          className={cn(cs.link, { [cs.apple]: url === 'appStore' })}
          href={urls[url as keyof typeof urls]}
          key={url}
          link
          variant={ButtonVariants.Secondary}
        >
          {component}
        </Button>
      ))}
    </div>
  </PromoCard>
);
